<template>
	<view class="p04 account">
			<u-form :model="setForm" ref='form' :label-style="{fontSize:'32rpx'}">
				<u-form-item label="提现方式:" label-width="180">
					<u-radio-group v-model="setForm.type" @change="radioGroupChange">
								<u-radio 
									v-for="(item, index) in list" :key="index" 
									:active-color="tColor"
									:name="item.name"
									:disabled="disabled"
								>
									{{item.label}}
								</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="手机号:" label-width="180">
					<u-input v-if="setForm.type=='1'" v-model="setForm.wxTel" placeholder="请输入手机号" />
					<u-input v-if="setForm.type=='2'" v-model="setForm.aliTel" placeholder="请输入手机号" />
					<u-input v-if="setForm.type=='3'" v-model="setForm.bankTel" placeholder="请输入手机号" />
				</u-form-item>
				
				<view v-if="setForm.type=='1'">
					<u-form-item label="用户ID:" label-width="180">
						<view class="f-c-s">
							<view class="f-x-bt w100">
													<u-input :clearable='false' v-model="setForm.userId" placeholder="请输入用户ID" />
													<button class="mr40 f24" :style="{ background: tColor }" @click="onUserSearch">搜索</button>
												</view>
							
							<view class="c9 f24">*为了打款成功，请真实的填写您的用户ID号</view>
							<view class="c9 f24" style="margin-top: -20rpx;">当前绑定微信昵称：<span class="cfa">{{ wxName }}</span></view>
						</view>
					</u-form-item>
					<u-form-item label="收款码:" label-width="180">
					  <mg-photo
						:w="'50'"
						:max="'1'"
						:file-list="wxUpload"
						@change-img="changeWxImg"
					  />
					</u-form-item>
				</view>
				
				<view v-if="setForm.type=='2'">
					<u-form-item label="支付宝账号:" label-width="180">
					  <u-input v-model="setForm.aliAccount" placeholder="请输入真实的支付宝账号" />
					</u-form-item>
					<u-form-item label="真实姓名:" label-width="180">
					  <u-input v-model="setForm.aliUserName" placeholder="请输入您的真实姓名" />
					</u-form-item>
					<u-form-item label="收款码:" label-width="180">
					  <mg-photo
						:w="'50'"
						:max="'1'"
						:file-list="aliUpload"
						@change-img="changeAliImg"
					  />
					</u-form-item>
				</view>
				
				<view v-if="setForm.type=='3'">
					<u-form-item label="所属银行:" label-width="180">
					  <u-input v-model="setForm.bankName" placeholder="请输入银行卡所属银行" />
					</u-form-item>
					<u-form-item label="所属支行:" label-width="180">
					  <u-input v-model="setForm.subBank" placeholder="请输入银行卡所属支行" />
					</u-form-item>
					<u-form-item label="银行卡账号:" label-width="180">
					  <u-input v-model="setForm.bankAccount" placeholder="请输入真实的银行卡卡号" />
					</u-form-item>
					<u-form-item label="真实姓名:" label-width="180">
					  <u-input v-model="setForm.bankUserName" placeholder="请输入您的真实姓名" />
					</u-form-item>
				</view>
			</u-form>
		<button v-if="!disabled" @click="submit" class="foot-btn mt20" :style="{ background: tColor }">提交</button>
		<view v-else class="c9 f24 mt20">注意：提现方式一旦确定，将不能修改，如需修改，请联系总管理员咨询</view>
	</view>
</template>

<script>
	import mgPhoto from '@/components/form/mg-photo.vue';
	import {
		uploadImg
	} from '@/common/wechat-util.js'
	import utils from '@/common/utils.js'
	export default {
		components: {
			mgPhoto,
		},
		data() {
			return {
				wxName:'',
				disabled:true,
				list:[
					{
						name:'1',
						label:'微信'
					},
					{
						name:'2',
						label:'支付宝'
					},
					{
						name:'3',
						label:'银行卡'
					},
				],
				// uploadList:[],
				wxUpload:[],
				aliUpload:[],
				setForm:{
					storeId: null,
					// 账户设置
					cashType1: false,
					cashType2: false,
					cashType3: false,
					userId: '',
					type: '1'
				}
			}
		},
		onLoad(options) {
			var account = uni.getStorageSync('account')
			this.storeId = account.storeId
			this.util.setNT('提现方式')
			this.getSetConfig()
		},
		methods: {
			async getSetConfig(){
				this.disabled = false
				let res = await this.util.request({
					'url': this.api.withdrawalSet,
					method: 'GET',
					data:{
						storeId:this.storeId
					}
				})
				if(!res.data.type){return}
				this.setForm = utils.deepCopy(res.data)
				if(!this.setForm.type){
					this.disabled = false
				}
				this.wxUpload.push(this.setForm.wxImg)
				this.aliUpload.push(this.setForm.aliImg)
			
			},
			async onUserSearch(){
				try{
					let res = await this.util.request({
						'url': this.api.getUserInfo,
						method: 'POST',
						data:{
							id:this.setForm.userId
						}
					})
					this.wxName = res.data.userName
				}catch(e){
					this.util.message(e.msg, 3, 2000)
				}
				
			},
			changeAliImg(e) {
				this.aliUpload = e.p;
			},
			changeWxImg(e){
				this.wxUpload = e.p
			},
			radioGroupChange(e){
				this.setForm.type = e
			},
			submit(){
				var upload = []
				if(this.setForm.type == '1'){
					upload = this.wxUpload
				}else if(this.setForm.type == '2'){
					upload = this.aliUpload
				}
				uploadImg({
					files: upload
				}).then(async fres => {
					console.log('fres',fres)
					if(this.setForm.type == '1'){
						this.setForm.wxImg = fres[0] || this.wxUpload[0]
					}else if(this.setForm.type == '2'){
						this.setForm.aliImg = fres[0] || this.aliUpload[0]
					}
					let res = await this.util.request({
						'url': this.api.withdrawalSet,
						method: 'POST',
						data: this.setForm
					})
					if (!res) {
						this.loading = false
					} else {
						this.util.message('保存成功', 1, 1000)
						this.showtc = false
						// this.refreshList()
						this.loading = false
						this.go({
							t:4
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.account{
		height: 100vh;
		background: #FFFFFF;
		margin-top: 20rpx;
	}
	::v-deep .u-form-item__body .u-form-item--left{
		align-items: flex-start;
	}
	::v-deep .u-radio .u-radio__icon-wrap--checked .u-icon .u-icon__icon{
		color: #000 !important;
	}
	
</style>
